<template>
  <div>
    <!-- 列设置 -->
    <el-drawer
      v-model="drawerVisible"
      title="自定义表格设置"
      size="450px"
      modal-class="colDrawer"
    >
      <div class="table-main">
        <el-divider v-if="searchSetting.length > 0">搜索设置</el-divider>
        <el-table
          v-if="searchSetting.length > 0"
          :data="searchSetting"
          border
          row-key="prop"
          default-expand-all
          :tree-props="{ children: '_children' }"
        >
          <el-table-column prop="label" align="center" label="搜索项名" />
          <el-table-column
            v-slot="scope"
            prop="isShow"
            align="center"
            label="显示"
          >
            <el-switch v-model="scope.row.isShow" />
          </el-table-column>
          <template #empty>
            <div class="table-empty">
              <img src="@/assets/images/notData.png" alt="notData" width="60" />
              <div>暂无可配置搜索项</div>
            </div>
          </template>
        </el-table>

        <el-divider>列表设置</el-divider>
        <el-table
          :data="colSetting"
          border
          row-key="prop"
          default-expand-all
          :tree-props="{ children: '_children' }"
        >
          <el-table-column prop="label" align="left" label="表格列名" />
          <el-table-column
            v-slot="scope"
            prop="isShow"
            align="center"
            label="显示"
          >
            <el-switch v-model="scope.row.isShow" />
          </el-table-column>
          <el-table-column
            v-slot="scope"
            prop="sortable"
            align="center"
            label="排序"
          >
            <el-switch v-model="scope.row.sortable" />
          </el-table-column>
          <template #empty>
            <div class="table-empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无可配置列</div>
            </div>
          </template>
        </el-table>
      </div>
    </el-drawer>
    <div
      class="right-panel-btn"
      :style="{ cursor: isDragging ? 'move' : 'pointer' }"
      id="dragElement"
    >
      <i-ep-setting />
    </div>
  </div>
</template>

<script setup lang="ts" name="ColSetting">
import { ref } from "vue";
// import { ColumnProps } from "@/components/ProTable/interface";

const props = defineProps<{
  colSetting: any[];
  searchSetting: any[];
}>();
let emit = defineEmits(["search-handle", "col-handle"]);

const drawerVisible = ref<boolean>(false);

const openColSetting = () => {
  drawerVisible.value = true;
};

// 是否展示搜索框
const showSearch = ref(true);
watch(
  () => props.searchSetting,
  (newVal) => {
    // console.log(newVal);
    const searchList = newVal!.filter((item) => item.isShow !== false);
    if (searchList.length) {
      emit("search-handle", true);
      showSearch.value = true;
    } else {
      emit("search-handle", false);
      showSearch.value = false;
    }
  },
  {
    deep: true,
  }
);

// 是否展示table
const showTable = ref(true);
watch(
  () => props.colSetting,
  (newVal) => {
    // console.log(newVal);
    const searchList = newVal!.filter((item) => item.isShow !== false);
    if (searchList.length) {
      emit("col-handle", true);
      showTable.value = true;
    } else {
      emit("col-handle", false);
      showTable.value = false;
    }
    // console.log("showTable.value", showTable.value, searchList);
  },
  {
    deep: true,
  }
);

const isDragging = ref(false);
/**侧边栏按钮上下拖拽功能部分 */
const SideBtnDrag = () => {
  const dragElement = document.getElementById("dragElement") as HTMLElement;
  let startY = 0;
  let currentY = 0;
  function handleMouseMove(event: any) {
    isDragging.value = true;
    currentY = event.clientY;
    // 移动的距离
    const distance = currentY - startY;

    let currentTop =
      parseInt(dragElement.style.top) || dragElement.offsetTop || 0;
    const viewportHeight = window.innerHeight;
    // 兼容边界部分
    if (currentTop <= 0) {
      currentTop = 0;
    } else if (currentTop + 40 > viewportHeight) {
      currentTop = viewportHeight - 40;
    }
    dragElement.style.top = currentTop + distance + "px";
    startY = currentY;
    dragElement.removeEventListener("click", handleClick);
  }
  function handleMouseUp() {
    isDragging.value = false;
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("mouseup", handleMouseUp);
  }
  dragElement.addEventListener("mousedown", (event) => {
    startY = event.clientY;
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    dragElement.addEventListener("click", handleClick);
  });
};

onMounted(() => {
  SideBtnDrag();
});

const handleClick = () => {
  openColSetting();
};

defineExpose({
  openColSetting,
  showSearch,
});
</script>

<style lang="scss">
.colDrawer {
  .el-drawer__header {
    margin-bottom: 0px !important;
  }
  .el-divider__text {
    font-weight: bold;
  }
}

.cursor-move {
  cursor: move;
}

.right-panel-btn {
  z-index: 200;
  position: fixed;
  right: 0;
  top: 200px;
  width: 36px;
  height: 36px;
  color: var(--el-color-white);
  text-align: center;
  cursor: pointer;
  background-color: var(--el-color-primary);
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 20px;
    height: 20px;
    vertical-align: -10px;
  }
}
</style>
